{% extends './views/layout/layout.html' %}

{% block head %}
<link rel="stylesheet" href="/public/css/user.css" />
{% endblock %}

{% block main %}
<div class="main">

  <div class="container">
    <div class="box clearfix">
      <div class="h">
        <h2 class="title">注册</h2>
      </div>

      <div class="sidebar">
        <div class="c">
          <div class="menu-box">
            <h3 class="title">账户管理</h3>
            <ul class="list">
              <li class="active">
                <a href="/user">个人信息</a>
              </li>
              <li>
                <a href="/resetPassword">修改密码</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="c profile clearfix">
          <div class="avatar-box">
            <div class="avatar-area">
              <div class="avatar-bg"
                style="background-image: url('https://account.xiaomi.com/static/res/7c3e9b0/passport/acc-2014/img/n-avator-bg.png');">
              </div>
              <div class="avatar-edit">

              </div>
              <style>
                .form {
                  position: absolute;
                  bottom: -2em;
                  left: 10px;
                }
              </style>
              <form action="/user/uploadAvatar" class="form" enctype="multipart/form-data">
                <input type="file" name="avatar" class="upload-input" style="display: none;">
                <button>保存修改</button>
              </form>

            </div>
          </div>
          <div class="info-box">
            <div class="info-list">
              <div class="h">
                <h3>基础资料</h3>
              </div>
              <div class="list">
                <p>
                  <span class="k">姓名：</span>
                  <span class="v">zMouse</span>
                </p>
                <p>
                  <span class="k">性别：</span>
                  <span class="v">男</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<script>


  document.querySelector(".avatar-edit").onclick = function () {
    document.querySelector(".upload-input").click()
  }

  document.querySelector(".upload-input").onchange = function () {
    // 获取文件
    const uploadImg = this.files[0]
    // 创建阅读器
    const reader = new FileReader()
    // 设置读取文件返回的结果 编码方式
    reader.readAsDataURL(uploadImg);
    // reader.readAsText(file);
    // reader.readAsBinaryString(file)
    // 文件读取成功完成时触发
    reader.onload = function () {
      console.log(reader.result)
      document.querySelector(".avatar-bg").style.background = `url(${reader.result}) center`
    }
  }
</script>
{% endblock %}
